<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="bw">bw1</div>
    <div class="bw">bw2</div>
    <div id="bw3">
        <ol>
            <li>111</li>
            <li>222</li>
        </ol>
    </div>
    <script>
        /* 
            需求：获取class="bw" 的元素

            querySelector:返回的是一个对象
            querySelectorAll：返回的是一个集合
         */
        const divObj = document.querySelector(".bw");
        console.log(divObj);
        /* 
            这里返回的divObj是一个对象，对象的属性如何看
                console.log(obj)：每个对象会以字符串的形式输出到控制台
                divObj：<div class="bw" >bw1</div>
            console.dir(obj)：在控制台中显示指定 JavaScript 对象的属性
                divObj：
                    div.bw
                    accessKey: ""
                    align: ""
                    ariaAtomic: null
                    ariaAutoComplete: null
                    ariaBusy: null
                    ariaChecked: null
                    ariaColCount: null
                    .....
        */
        console.dir(divObj);
        console.log(divObj.innerText);
        console.log(divObj.tagName);

        // 获取bw3的div
        const div3Obj = document.querySelector("#bw3");//获取class带. 获取id带#
        console.log(div3Obj);

        const li1Obj = document.querySelector("li");
        console.log(li1Obj);

        // 获取bw的全部div
        const divs = document.querySelectorAll(".bw");
        console.log(divs);//NodeList(2) [div.bw, div.bw]

        // 获取全部的li
        const lis = document.querySelectorAll("li");
        console.log(lis);







    </script>
</body>

</html>